<!DOCTYPE html>
<html>
    <head>
        <title>欢迎使用</title>
        <script src="../../third/jquery-3.6.1.js"></script>
        <script src="../../third/layui/layui.js"></script>
        <link rel="stylesheet" type="text/css" href="../../third/layui/css/layui.css"/>
    </head>
    <body>
        <div class="layui-layout layui-layout-admin">
            <div class="layui-header">
                <div class="layui-logo layui-hide-xs layui-bg-black">订单管理</div>
                <!-- 头部区域（可配合layui 已有的水平导航） -->
                <ul class="layui-nav layui-layout-left">
                <!-- 移动端显示 -->
                <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
                    <i class="layui-icon layui-icon-spread-left"></i>
                </li>
                </ul>
                <ul class="layui-nav layui-layout-right" style="margin-right: 40px;">
                    <li class="layui-nav-item layui-hide layui-show-md-inline-block">
                        <a href="javascript:;">
                        tester
                        </a>
                        <dl class="layui-nav-child">
                        <dd><a href="">Your Profile</a></dd>
                        <dd><a href="">Settings</a></dd>
                        <dd><a href="">Sign out</a></dd>
                        </dl>
                    </li>
                </ul>
            </div>
        
            <div class="layui-side layui-bg-black">
                <div class="layui-side-scroll">
                    <ul class="layui-nav layui-nav-tree" lay-filter="test">
                        <li class="layui-nav-item">
                            <a href="../index.html">订单区</a>
                        </li>
                        <li class="layui-nav-item layui-nav-itemed">
                            <a class="" href="javascript:;">车间区</a>
                            <dl class="layui-nav-child">
                                <dd class="layui-this"><a href="cxworkshop.html">成型车间</a></dd>
                                <dd class=""><a href="cxworkshop.html">烧结</a></dd>
                                <dd class=""><a href="cxworkshop.html">整形车间</a></dd>
                                <dd class=""><a href="cxworkshop.html">机加工</a></dd>
                                <dd class=""><a href="cxworkshop.html">热处理</a></dd>
                                <dd class=""><a href="cxworkshop.html">外协</a></dd>
                                <dd class=""><a href="cxworkshop.html">包装</a></dd>
                            </dl>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="layui-body">
                <table class="layui-hide" id="InnerPage" lay-filter="InnerPage"></table>
                <script type="text/html" id="toolbarDemo">
                    <form class="layui-form" action="" style="display:flex">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <div class="layui-input-inline">
                                    <input name="ProNum" placeholder="生产数量" lay-verify="required" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <div class="layui-input-inline">
                                    <select name="ProCondition" lay-filter="aihao" aria-placeholder="生产情况">
                                        <option value="">生产情况</option>
                                        <option value="0">不及格</option>
                                        <option value="1">及格</option>
                                        <option value="2">良好</option>
                                        <option value="3">优秀</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <div class="layui-input-inline">
                                    <input name="Message" placeholder="备注" lay-verify="required" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button type="submit" class="layui-btn" lay-submit="" lay-filter="NewAdd">新增</button>
                                
                            </div>
                        </div>
                    </form>
                </script>
            </div>
            <div class="layui-footer">
                @copyright wys/lh
                <button type="submit" class="layui-btn" onclick="complete()" style="float: right;">
                    完成
                </button>
            </div>
        </div>
    </body>

    <script>
        const consditionlist = ['不及格', '及格', '良好', '优秀'] 

        layui.use(['element', 'layer', 'util'], function () {
            var element = layui.element
                , layer = layui.layer
                , util = layui.util
                , $ = layui.$
            //头部事件
            util.event('lay-header-event', {
                //左侧菜单事件
                menuLeft: function (othis) {
                    layer.msg('展开左侧菜单的操作', { icon: 0 });
                }
                , menuRight: function () {
                    layer.open({
                        type: 1
                        , content: '<div style="padding: 15px;">处理右侧面板的操作</div>'
                        , area: ['260px', '100%']
                        , offset: 'rt' //右上角
                        , anim: 5
                        , shadeClose: true
                    })
                }
            })
        })

        layui.use(['table', 'dropdown', 'form'], function () {
            var table = layui.table
            var dropdown = layui.dropdown
            var form = layui.form
            // 创建渲染实例
            table.render({
                id: 'stock_add_table'
                , elem: '#InnerPage'
                // , url: '../static/data/demo1.json' 
                , data: getdata()
                , lineStyle: "height:50px"
                , toolbar: '#toolbarDemo'
                , defaultToolbar: ['filter', 'exports', 'print']
                , height: 'full-120' // 最大高度减去其他容器已占有的高度差
                , cellMinWidth: 80
                , totalRow: true // 开启合计行
                // , page: true
                , limit: 99999
                , cols: [[
                    { field: 'ID', width: 80, title: 'ID', totalRowText: '合计：' }
                    , { field: 'ProTime', width: 180, title: '生产时间', sort: true, templet:(d) => {return new Date(parseInt(d.ProTime)).toLocaleString()}}
                    , { field: 'ProNum', title: '生产数量', hide: 0, width: 120, totalRow: '{{= d.TOTAL_NUMS }} 😊' }
                    , { field: 'ProCondition', width: 140, title: '生产情况', templet:(d) => {return consditionlist[d.ProCondition]} }
                    , { field: 'Message', title: '备注', minWidth: 260, style: '-moz-box-align: start;'}
                    // , { field: 'experience', width: 100, title: '积分', sort: true, totalRow: '{{= d.TOTAL_NUMS }} 😊' }
                    // , { field: 'checkin', title: '打卡', width: 100, sort: true, totalRow: '{{= parseInt(d.TOTAL_NUMS) }} 次' }
                    // , { field: 'ip', title: 'IP', width: 120 }
                    // , { field: 'joinTime', title: '加入时间', width: 120 }
                    // , { fixed: 'right', title: '操作', width: 125, minWidth: 125, toolbar: '#barDemo' }
                ]]
                , done: function () {
                    var id = this.id;

                    // 重载测试
                    dropdown.render({
                        elem: '#reloadTest' //可绑定在任意元素中，此处以上述按钮为例
                        , data: [{
                            id: 'reload',
                            title: '重载'
                        }, {
                            id: 'reload-deep',
                            title: '重载 - 参数叠加'
                        }, {
                            id: 'reloadData',
                            title: '仅重载数据'
                        }, {
                            id: 'reloadData-deep',
                            title: '仅重载数据 - 参数叠加'
                        }]
                        // 菜单被点击的事件
                        , click: function (obj) {
                            switch (obj.id) {
                                case 'reload':
                                    // 重载 - 默认（参数重置）
                                    table.reload('test', {
                                        where: {
                                            abc: '123456'
                                            //,test: '新的 test2'
                                            //,token: '新的 token2'
                                        }
                                        /*
                                        ,cols: [[ // 重置表头
                                            {type: 'checkbox', fixed: 'left'}
                                            ,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true, totalRowText: '合计：'}
                                            ,{field:'sex', title:'性别', width:80, edit: 'text', sort: true}
                                            ,{field:'experience', title:'积分', width:80, sort: true, totalRow: true, templet: '<div>{{ d.experience }} 分</div>'}
                                            ,{field:'logins', title:'登入次数', width:100, sort: true, totalRow: true}
                                            ,{field:'joinTime', title:'加入时间', width:120}
                                        ]]
                                        */
                                    });
                                    break;
                                case 'reload-deep':
                                    // 重载 - 深度（参数叠加）
                                    table.reload('test', {
                                        where: {
                                            abc: 123
                                            , test: '新的 test1'
                                        }
                                        //,defaultToolbar: ['print'] // 重载头部工具栏右侧图标
                                        //,cols: ins1.config.cols
                                    }, true);
                                    break;
                                case 'reloadData':
                                    // 数据重载 - 参数重置
                                    table.reloadData('test', {
                                        where: {
                                            abc: '123456'
                                            //,test: '新的 test2'
                                            //,token: '新的 token2'
                                        }
                                        , scrollPos: 'fixed'  // 保持滚动条位置不变 - v2.7.3 新增
                                        , height: 2000 // 测试无效参数（即与数据无关的参数设置无效，此处以 height 设置无效为例）
                                        //,url: '404'
                                        //,page: {curr: 1, limit: 30} // 重新指向分页
                                    });
                                    break;
                                case 'reloadData-deep':
                                    // 数据重载 - 参数叠加
                                    table.reloadData('test', {
                                        where: {
                                            abc: 123
                                            , test: '新的 test1'
                                        }
                                    }, true);
                                    break;
                            }
                            layer.msg('可观察 Network 请求参数的变化');
                        }
                    });

                    // 更多测试
                    dropdown.render({
                        elem: '#moreTest' //可绑定在任意元素中，此处以上述按钮为例
                        , data: [{
                            id: 'add',
                            title: '添加'
                        }, {
                            id: 'update',
                            title: '编辑'
                        }, {
                            id: 'delete',
                            title: '删除'
                        }]
                        //菜单被点击的事件
                        , click: function (obj) {
                            var checkStatus = table.checkStatus(id)
                            var data = checkStatus.data; // 获取选中的数据
                            switch (obj.id) {
                                case 'add':
                                    layer.open({
                                        title: '添加',
                                        type: 1,
                                        area: ['80%', '80%'],
                                        content: '<div style="padding: 16px;">自定义表单元素</div>'
                                    });
                                    break;
                                case 'update':
                                    if (data.length !== 1) return layer.msg('请选择一行');
                                    layer.open({
                                        title: '编辑',
                                        type: 1,
                                        area: ['80%', '80%'],
                                        content: '<div style="padding: 16px;">自定义表单元素</div>'
                                    });
                                    break;
                                case 'delete':
                                    if (data.length === 0) {
                                        return layer.msg('请选择一行');
                                    }
                                    layer.msg('delete event');
                                    break;
                            }
                        }
                    });
                }
                , error: function (res, msg) {
                    console.log(res, msg)
                }
            })

            form.on('submit(NewAdd)', function(data){
                let dataBak = []
                let tableBak = table.cache.stock_add_table
                const newRow = {
                    ID: tableBak.length + 1,
                    ProTime: new Date().getTime(),
                    ...data.field,
                    ProCondition: data.field.ProCondition
                }
                dataBak = [...tableBak, newRow]
                table.reload("stock_add_table", { data: dataBak })
                delete newRow['LAY_TABLE_INDEX']
                console.log(newRow)
                $.ajax({
                    type: 'GET',
                    url: 'http://127.0.0.1:5000/DataAdd',
                    async: false,
                    data: { table: 'csworkshop', data: JSON.stringify(newRow) },
                    dataType:"text",
                    success: function(res) {
                        console.log(res)
                    }
                })
                return false
            })

            // 行单击事件
            table.on('row(InnerPage)', function (obj) {
                console.log(obj);
                //layer.closeAll('tips');
            })
        })

        function getdata(){
            let data = []
            $.ajax({
                type: 'GET',
                url: 'http://127.0.0.1:5000/DataCatch',
                async: false,
                data: {
                    table : 'csworkshop'
                },
                dataType:"json",
                success: function(res) {
                    console.log(res)
                    data = res.data
                } // 请求成功之后的回调函数
            })
            console.log(data)
            return data
        }

        function complete(){

        }
    </script>
</html>